<script>
import MyBase from 'common/formComponent/MyBase';
import UniRate from 'uview-ui/components/u-rate/u-rate';

export default {
  name: 'MyRate',

  components: {
    MyBase
  },

  props: {
    title: {
      type: String,
      default: ''
    },

    count: {
      type: Number,
      default: 5
    },

    value: {
      type: Number,
      default: 0
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }
  },

  render(h) {
    const baseSlots = {
      header: () => {
        return (
          <view>
            { this.title }
          </view>
        );
      },

      content: () => {
        return h(UniRate, {
          props: {
            activeIcon: 'star-fill',
            inactiveIcon: 'star',
            count: this.count,
            value: this.value,
            disabled: this.disabled,
            size: 48,
            gutter: 15,
            colors: ['#1492FF']
          },

          on: {
            change: e => {
              this.$emit('update:value', e);
            }
          }
        });
      }
    };

    return (
      <My-Base icon={this.icon} isShowIconArrow={ false } scopedSlots={ baseSlots }/>
    );
  }
};
</script>

<style lang="scss" scoped>
</style>
